iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 21

[前端暴龍機,Vue2.x 進化 Vue3 ] Day21. 『小專題◕ᴥ◕』 Vue 旅遊小幫手(二)

  • 分享至 

  • xImage
  •  

今天繼續來增加功能,並再取得另一批資料來使用

目標四,再加入旅館 API

有了景點,再來解決住的部份,所以我們再繼續加入另一支 API ,取得旅館的訊息
高雄市一般旅館資料

再取一份旅館資料

data:{
    attractions: [],
    areaList: [],
    hotels: [],
    selectArea: '全景點',
    selectHotel: {},
},
.....
methods:{
    getDatas(){
      
      // 取得旅遊景點
      axios.get("https://api.kcg.gov.tw/api/service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then( res => {
        this.attractions = res.data.data.XML_Head.Infos.Info;
        this.getAreaList();
      }).catch( error => { })
      
      // 取得旅館資料
      axios.get("https://api.kcg.gov.tw/api/service/Get/8ed53368-e292-4e2a-80a7-434cf497220c").then( res => {
        this.hotels = res.data.data;
      }).catch( error => { })
    },
    getAreaList(){
      this.attractions.forEach(ele => {
        let areaName = ele.Add.substring(6,9);
        if(!this.areaList.includes(areaName)) this.areaList.push(areaName);
      })
    },
    setArea(item){
      this.selectArea = item;
    }
}

同樣使用 computed 做列表渲染

computed:{
    renderAttractions(){
      if(this.selectArea === '全景點'){
        return this.attractions;
      }else{
        return this.attractions.filter(ele => ele.Add.match(this.selectArea))
      }
    },
    renderHotels(){
      if(this.selectArea === '全景點'){
        return this.hotels;
      }else{
        return this.hotels.filter(ele => ele.鄉鎮.match(this.selectArea))
      }
    }
},

只有在該地區後才會顯示選該旅館

接著,不希望在預設全景點時就顯示旅館訊息,所以我們必須加上條件 - 只有點選區域後,才會顯示該地區的旅館訊息,那麼還記得在 Vue 裡面,我們要去控制內容顯示或不顯示的指令是甚麼嗎? 沒錯,我們將使用 v-if

<div id="app">
  <div class="flexbox areaList">
    <div class="areaBtn" :class="{activeArea: selectArea === '全景點'}" @click="setArea('全景點')">全景點</div>
    <div class="areaBtn" :class="{activeArea: selectArea === item }" v-for="item in areaList" :key="item" @click="setArea(item)"> {{ item }} </div>
  </div>
  
  <div class="flexbox hotelslist" v-if="selectArea !== '全景點'">
    <h3>旅館列表</h3>
    <div v-for="item in renderHotels" :key="item.seq" class="Hotels">
      <span>
        {{ item.旅宿名稱 }}( {{ item.電話 }} ) | {{ item.地址 }}
      </span>
      <button class="hotelSelect" @click="setHotel(item)">選擇</button>
    </div>
    
  </div>

  <ul>
    <li class="attractions" v-for="item in renderAttractions" :key="item.Id">{{ item.Name }} [ {{ item.Add }} ]</li>
  </ul>
</div>

在 HTML 部份,除了加上 v-if 控制之外,我還有再稍微調整一下板型,所以架構有些變化,另外會將選中的飯店透過 setHotel function() 存到變數 selectHotel

目標五,我沒車車怎麼辦?

疊字~ 喜歡嗎? 還是討厭? (歡迎下面留言 XD

沒關係,這裡有 YouBike

高雄YouBike2.0公共自行車租賃站即時資訊
https://ithelp.ithome.com.tw/upload/images/20210818/20120722M4T4rGko0m.jpg
看到了嗎 ? YouBike 資訊 可是熱門應用第一名呢,不怕你騎、就怕你不騎~

取得 YouBike 2.0 訊息

data:{
    attractions: [],
    areaList: [],
    hotels: [],
    youbikes: [],
    selectArea: '全景點'
},
.....
methods:{
    getDatas(){
      
      // 取得旅遊景點
      axios.get("https://api.kcg.gov.tw/api/service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then( res => {
        this.attractions = res.data.data.XML_Head.Infos.Info;
        this.getAreaList();
      }).catch( error => { })
      
      // 取得旅館資料
      axios.get("https://api.kcg.gov.tw/api/service/Get/8ed53368-e292-4e2a-80a7-434cf497220c").then( res => {
        this.hotels = res.data.data;
      }).catch( error => { })
      
      // 取得 YouBike資料
      axios.get("https://api.kcg.gov.tw/api/service/Get/b4dd9c40-9027-4125-8666-06bef1756092").then( res => {
        this.youbikes = res.data.data.retVal;
      }).catch( error => { })
    },
    getAreaList(){
      this.attractions.forEach(ele => {
        let areaName = ele.Add.substring(6,9);
        if(!this.areaList.includes(areaName)) this.areaList.push(areaName);
      })
    },
    setArea(item){
      this.selectArea = item;
    }
}

取完資料後剩下的就等下一篇整合一下運用了~


小結

  1. 複習 v-if 控制顯示
  2. 複習 axios 串接 API

上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day20. 『小專題◕ᴥ◕』 Vue 旅遊小幫手(一)
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day22. Vue 旅遊小幫手(完成)
系列文
前端暴龍機,Vue2.x 進化 Vue330
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言